<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
●scale()缩放
context.scale(x,y);
x:表示水平方向缩放的倍数；
y:表示垂直方向缩放的倍数。

案例
<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = "#fc0";
  ctx.linewidth = 1.5;
  ctx.fillRect(0,0,300,300);
  ctx.save();// 保存当前的状态
  ctx.translate(50,50);//平移原点坐标
  draw(ctx,22,6,5);
  ctx.translate(100,0);
  ctx.scale(0.75,0.75);// 缩放图形
  draw(ctx,22,6,5);
  ctx.translate(133.133,0);// 在上一个基础上平移
  ctx.scale(0.75,0.75);// 在上面的基础上缩小
  draw(ctx,22,6,5);
  ctx.restore();
  function draw(ctx,R,r,O)
  {
    var x1 = R - O,y1 = 0,i = 1;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    do{
      if(i < 20000)
      {
        var x2 = (R + r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i * Math.PI / 72));
        var y2 = (R + r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i * Math.PI / 72));
        ctx.lineTo(x2,y2);
        x1 = x2;
        y1 = y2;
        i++;
      }
    }while(x2 != R-O && y2 != 0);
    ctx.stroke();
  }
</script>
</body>
</html>
